// 1剪裁 2上传选图片 3选图后 更换剪裁区的图片 4点击确定剪裁图片发请求真正更换
// 一*******************
 // 1.1 获取裁剪区域的 DOM 元素
 var $image = $('#image')
  
 // 1.2 配置选项
 const options = {
   // 纵横比
   aspectRatio: 1,
   // 指定预览区域
   preview: '.img-preview'
 }

 // 1.3 创建裁剪区域
$image.cropper(options);
//  2*************
$('button:contains("上传")').on('click', function () {
    $('#file').trigger('click')
})
// 3**********
$('#file').on('change', function () {
    if (this.files.length > 0) {
        var fileObj = this.files[0]
        var url = URL.createObjectURL(fileObj)
        // 先destroy 剪裁框
        $image.cropper('destroy').attr('src',url).cropper(options)
    }
    
})
// 4***************
$('button:contains("确定")').on('click', function () {
    // 剪裁first
   var base64 =  $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 100,
        height: 100
   }).toDataURL('image/png')  //转base64格式字符串
    // canvas.toBlob()转文件对象
    $.ajax({
        url: '/my/user/avatar',
        type: 'POST',
        data:{avatar:base64},
        success: function (res) {
            layer.msg(res.message)
            if (res.status===0) {
                window.parent.userInfo()
            }
        }
    })
})
